<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0;
			padding: 0;
			font-size: 40px;
			}
			a{
				color: #000000;
				text-decoration: none;
			}
			ul.caidan li{
				float: left;
				list-style: none;
				width: 200px;
				background-color: bisque;
			}
			ul.caidan li:hover{
				background-color: fuchsia;
			}
			ul.caidan li ul.erji{
				display: none;
			}
			ul.caidan li:hover ul.erji{
				display: block;
			}
			ul.caidan li:hover ul.erji li:hover{
				background-color: aqua;
			}
			.caidan{
				border: 1px solid black;
				width: 800px;
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
        <img src="1.png">
		<ul class="caidan">  
			<li>学校概括<ul class="erji">
				<li><a href="">学校简介</a></li>
				<li><a href="">校园风景</a></li>
				<li><a href="">校园图片</a></li>
			</ul></li>
			<li>机构设置<ul class="erji">
				<li><a href="">党政管理机构</a></li>
				<li><a href="">教学机构</a></li>
				
			</ul></li>
			<li>招生就业<ul class="erji">
				<li><a href="">招生信息</a></li>
				<li><a href="">就业信息</a></li>
				<li><a href="">专升本</a></li>
			</ul></li>
			<li>校园生活<ul class="erji">
				<li><a href="">学生工作</a></li>
				<li><a href="">向学青年</a></li>
				<li><a href="">心灵驿站</a></li>
		</ul></li>
        </body>
        <html>
            <img src="2.png">